@use '../base/mixins';

$sidenav-wide-layout: 1024px;

#sidenav {
  margin: 0;
  min-width: 16rem;
  height: calc(100vh - var(--site-header-height) - var(--site-subheader-height));
  top: calc(var(--site-header-height) + var(--site-subheader-height));
  padding: 0.75rem 0.75rem 3rem;
  position: fixed;
  scrollbar-width: thin;
  overflow-y: auto;

  display: none;
  width: 100%;
  background-color: var(--site-base-bgColor);
  z-index: var(--site-z-side);

  @at-root body.open_menu {
    overflow-y: hidden;

    @media (min-width: $sidenav-wide-layout) {
      overflow-y: auto;
    }

    #sidenav {
      display: block;
    }
  }

  @media (min-width: $sidenav-wide-layout) {
    display: block;
    width: 16rem;
    position: sticky;
    height: calc(100vh - var(--site-header-height));
    top: var(--site-header-height);
    overscroll-behavior: auto;

    border-right: 0.1rem solid var(--site-outline-variant);
    background: none;

    @at-root body.open_menu #page-content {
      display: flex;
    }
  }

  .nav-header {
    font-weight: bolder;
    padding: 0.25rem 0.4rem 0;
    color: var(--site-base-fgColor-lighter);
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    transition: none;
  }

  .sidenav-divider {
    background-color: var(--site-outline-variant);
    border-radius: 0.5rem;
    width: 100%;
    height: 0.125rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

  li {
    margin: 0;
    padding: 0;
    font-size: 0.925rem;
    line-height: 1.25rem;
    width: 100%;
    user-select: none;

    .nav-header:not(:first-child) {
      margin-top: 0.5rem;
    }

    a, button {
      background: none;
      border: none;
      text-wrap: pretty;
      text-align: left;
      padding: 0.25rem 0.4rem;
      margin-top: 0.25rem;
      margin-bottom: 0.25rem;

      border-radius: 0.25rem;

      display: flex;
      flex-direction: row;
      width: 100%;
      align-items: center;
      justify-content: space-between;

      cursor: pointer;

      color: var(--site-base-fgColor);
      font-family: var(--site-ui-fontFamily);
      text-decoration: none;

      &:focus-visible {
        outline: 2px solid var(--site-primary-color);
      }

      &.nav-link {

        > div {
          display: inline-block;

          .material-symbols {
            font-size: 0.825rem;
            margin-left: 0.125rem;
            color: var(--site-base-fgColor-alt);
          }
        }

        span {
          vertical-align: middle;
        }

        .expander {
          color: var(--site-base-fgColor-lighter);
          transition: transform .3s ease-in-out;
        }

        + ul {
          display: none;
        }

        &:hover {
          @include mixins.interaction-style(3%);
        }

        &:active {
          @include mixins.interaction-style(5%);
        }

        &:not(.collapsed) {
          .expander {
            transform: rotate(180deg);
          }

          + ul {
            display: block;
          }
        }

        &.active {
          background-color: rgb(var(--site-interaction-base-values) / 4%);

          &:not(.collapsible) {
            color: var(--site-link-fgColor);
          }
        }
      }
    }
  }

  > ul {
    // Only apply styles to top-level entries.
    > li {
      font-size: 1rem;
    }

    ul {
      margin-left: 0.675rem;
    }
  }

  .navbar-nav {
    display: block;

    a.nav-button {
      font-size: 1.125rem;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      padding: 0.375rem 0.6rem;
      justify-content: flex-start;
      gap: .5rem;

      &.active {
        background-color: var(--site-primary-color);
        color: var(--site-onPrimary-color-lightest);
      }

      &:hover {
        @include mixins.interaction-style(5%);
      }

      &:active {
        @include mixins.interaction-style(10%);
      }
    }

    .material-symbols {
      font-size: 1.25rem;
    }

    // Hide items from top navbar in wide layout to avoid duplication.
    @media (min-width: $sidenav-wide-layout) {
      display: none;
    }
  }

  .site-header-search {
    display: flex;

    // Hide search from top navbar in wide layout.
    @media (min-width: $sidenav-wide-layout) {
      display: none;
    }
  }
}
